<script setup>
import {reactive, ref} from "vue";
import {GENDER_OPTIONS, ZODIAC_OPTIONS} from "../../const/project.js";
import {RULE} from "../../const/index.js";
import router from "../../router/index.js";
import {ElMessage} from "element-plus";
import MyNav from "../../components/MyNav.vue";
import MyForm from "../../components/MyForm.vue";
import MyUploader from "../../components/MyUploader.vue";
import {updateApi} from "../../api/axios.js";
import {UPLOAD_AVATAR_URL, updatePasswordApi} from "../../api/ums/user.js";


//获取当前登录的用户记录


let loginUser = JSON.parse(sessionStorage.getItem('loginUser'));
/* ======================= 页面常量 ======================= */

//路径导航
const navItems = [
    {icon: 'House',label: 'DashBoard', url: '/DashBoard'},
    {icon: 'Edit',label: '修改个人信息'},
];

/* ======================= 修改基本信息 ======================= */

//表单项+表单值+表单规则
// 表单项、表单值及表单规则的定义
let updateFormItems = ref([
  { label: '登录账号', prop: 'username', disabled: true },
  { label: '真实姓名', prop: 'realname', disabled: true },
  { label: '手机号码', prop: 'phone', disabled: true },
  { label: '身份证号', prop: 'idcard', disabled: true },
  { label: '用户昵称', prop: 'nickname', span: 12 },
  { label: '电子邮件', prop: 'email', span: 12 },
  { label: '用户性别', prop: 'gender', span: 12, type: 'select', options: GENDER_OPTIONS },
  { label: '用户年龄', prop: 'age', span: 12, type: 'number' },
  { label: '用户星座', prop: 'zodiac', span: 12, type: 'select', options: ZODIAC_OPTIONS },
  { label: '用户省份', prop: 'province', span: 12 },
  { label: '用户描述', prop: 'info', type: 'textarea', rows: 7 }
]);

// 使用reactive定义响应式数据，初始化为loginUser对象
let updateFormData = reactive(loginUser);

// 定义表单验证规则
let updateFormRules = {
  nickname: RULE.NICKNAME,
  email: RULE.EMAIL,
  zodiac: RULE.ZODIAC,
  province: RULE.PROVINCE,
  info: RULE.INFO
};

/* ======================= 修改个人密码 ======================= */

//表单项+表单值+表单规则
let updatePasswordItems = ref([
  { label: '原密码', prop: 'oldPassword', type: 'password', required: true, placeholder: '输入原密码' },
  { label: '新密码', prop: 'newPassword', type: 'password', required: true, placeholder: '输入新密码' },
  { label: '确认密码', prop: 'rePassword', type: 'password', required: true, placeholder: '确认新密码' }
]);

let updatePasswordData = reactive({id: loginUser.id});

let updatePasswordRules = {
  oldPassword: RULE.PASSWORD,
  newPassword: [
    {pattern: RULE.PASSWORD[0].pattern, message: RULE.PASSWORD[0].message},
    {
      validator: (rule, value, callback) => {
        if (value === updatePasswordData.oldPassword) {
          callback(new Error('新旧密码不能相同'));
        } else {
          callback();
        }
      }
    }
  ],
  rePassword: [
    {pattern: RULE.PASSWORD[0].pattern, message: RULE.PASSWORD[0].message},
    {
      validator: (rule, value, callback) => {
        if (value !== updatePasswordData.newPassword) {
          callback(new Error('两次密码不一致'));
        } else {
          callback();
        }
      }
    }
  ],
};

/* ======================= 修改成功后 ======================= */

/**
 * 1. 提示“修改个人信息后需要至新登录！“
 * 2. 1秒钠后跳入登录页面
 */
function updateSuccess(){
  ElMessage('修改个人密码后需要重新登录！');
  setTimeout(() => router.push('/'), 1000);

}



</script>

<template>
  <my-nav :items="navItems"/>
  <el-divider/>
  <div class="personal-update-body">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="update-card" header="修改基本信息">
          <my-form type="update"
                   :items="updateFormItems"
                   :rules="updateFormRules"
                   :api="updateApi"
                   :args="{module: 'user'}"
                   :params="updateFormData"
                   :callback="updateSuccess"/>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="upload-avatar-card" header="上传个人头像">
          <my-uploader name="avatarFile"
                       :url="UPLOAD_AVATAR_URL + loginUser['id']"
                       :showFileList="false"
                       :autoUpload="true"
                       :callback="updateSuccess"/>
        </el-card>
        <el-card class="update-password-card" header="修改个人密码">
          <my-form type="update"
                   :items="updatePasswordItems"
                   :rules="updatePasswordRules"
                   :api="updatePasswordApi"
                   :params="updatePasswordData"
                   :callback="updateSuccess"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.personal-update-body {
  width: 90%; // 宽度
  margin: 20px auto 0; // 外边距

  .update-password-card {
    margin-top: 20px; // 上外边距
  }
}
</style>